<template>
<div class="notice-list">
    <div class="el-notification" v-for="(item, i) in list" :key="i">
        <i class="el-notification__icon el-icon-info"></i>
        <div class="el-notification__group is-with-icon">
            <h2 class="el-notification__title">{{item.name}}</h2>
            <div class="el-notification__content">
                <p>{{item.desc}}</p>
            </div>
            <div class="el-notification__closeBtn el-icon-close"></div>
        </div>
    </div>
</div>
</template>

<script>
import {
    mapGetters
} from 'vuex'
export default {
    name: 'NoticeList',
    computed: {
        ...mapGetters({
            projectId: 'common/getProjectId'
        })
    },
    data () {
        return {
            list: [{
                    name: '消息',
                    desc: '这是一条消息的提示消息'
                },
                {
                    name: '消息',
                    desc: '这是一条消息的提示消息'
                },
                {
                    name: '消息',
                    desc: '这是一条消息的提示消息'
                },
                {
                    name: '消息',
                    desc: '这是一条消息的提示消息'
                },
                {
                    name: '消息',
                    desc: '这是一条消息的提示消息'
                },
                {
                    name: '消息',
                    desc: '这是一条消息的提示消息'
                },
                {
                    name: '消息',
                    desc: '这是一条消息的提示消息'
                },
                {
                    name: '消息',
                    desc: '这是一条消息的提示消息'
                },
                {
                    name: '消息',
                    desc: '这是一条消息的提示消息'
                },
                {
                    name: '消息',
                    desc: '这是一条消息的提示消息'
                },
                {
                    name: '消息',
                    desc: '这是一条消息的提示消息'
                },
                {
                    name: '消息',
                    desc: '这是一条消息的提示消息'
                },
                {
                    name: '消息',
                    desc: '这是一条消息的提示消息'
                },
                {
                    name: '消息',
                    desc: '这是一条消息的提示消息'
                },
                {
                    name: '消息',
                    desc: '这是一条消息的提示消息'
                },
                {
                    name: '消息',
                    desc: '这是一条消息的提示消息'
                },
                {
                    name: '消息',
                    desc: '这是一条消息的提示消息'
                },
                {
                    name: '消息',
                    desc: '这是一条消息的提示消息'
                }
            ]
        }
    },
    created () {
        this.init()
    },
    methods: {
        init () {}
    }
}
</script>
<style lang="less" scoped>
.notice-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    .el-notification {
        width: 98%;
        position: relative;
        margin-bottom: 5px;
        box-shadow: initial;
        &:hover {
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        }
    }
}
</style>
